<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :background="{'background':'#fff'}" :isBack="true">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				优惠券
			</text>
		</base-nav-bar>
		<!-- 优惠券简介 -->
		<view v-if="!isEmpty" class="content-box" style="margin-top: 20rpx;">
			<view class="u-flex u-flex-column u-flex-between merchant-box u-m-l-30 u-m-r-30 u-m-b-20">
				<view class="course-item u-flex u-flex-between u-flex-items-center">
					<view class="u-flex u-flex-start u-flex-items-center u-flex-1">
						<view class="merchant-logo">
							<view class="coupon-top">
								全平台通用
							</view>
							<view class="coupon-money">
								<text class="u-font-26 coupon-unit">¥</text>
								{{ courseDetail.number }}
							</view>
							<view class="coupon-rule">
								满{{ courseDetail.money }}可用
							</view>
						</view>
						<view class="u-flex u-flex-items-start u-flex-column u-flex-between u-m-l-20 u-p-b-20 u-p-r-20 u-p-t-20" style="height: 180rpx;">
							<view class="course-item-text">{{ courseDetail.name }}</view>
							<view class="course-item-number">
								<text>¥</text>
								{{ courseDetail.score }}
							</view>
							<view class="course-item-number u-flex u-flex-start u-flex-items-center">
								<text style="margin-right: 6rpx">数量:{{courseDetail.give_num}}张</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="coupon-content">
			<view class="coupon-instructions">
				<view class="coupon-title">
					说明
				</view>
				<view class="coupon-sub-title">
					{{ courseDetail.content }}
				</view>
			</view>
			<view class="coupon-instructions">
				<view class="coupon-title">
					领取进度
				</view>
				<view class="coupon-sub-title">
					已领取
					<text class="coupon-sub-num">{{courseDetail.received_num}}</text>
					张，剩余
					<text class="coupon-sub-num">{{courseDetail.give_num-courseDetail.received_num}}</text>
					张
				</view>
				<view class="coupon-progress-content u-m-t-20">
					<u-line-progress :activeColor="'#F96C2F'" :percentage="(courseDetail.received_num / courseDetail.give_num) * 100" :showText="false" height="6"></u-line-progress>
					<view class="coupon-progress">
						<view class="coupon-progress-start" v-if="((courseDetail.received_num / courseDetail.give_num) * 100).toFixed(2)>8">0%</view>
						<view class="coupon-progress-running" :style="{left: courseDetail.received_num==0?'0%':((courseDetail.received_num / courseDetail.give_num) * 100).toFixed(2)+'%'}">
							{{  courseDetail.received_num==0?0:((courseDetail.received_num / courseDetail.give_num) * 100).toFixed(2) }}%</view>
						<view class="coupon-progress-end">100%</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty
			v-if="isEmpty"
			mode="data"
			text="暂无优惠券记录"
		>
		</u-empty>
	</view>
</template>

<script>
let systemInfo     = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo     = uni.getMenuButtonBoundingClientRect();
// #endif
import {mapGetters} from 'vuex';
import {HTTP_IMG_URL} from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			courseDetail: {},
			isEmpty     : false
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight", statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
	},
	onHide() {
	},
	onLoad(options) {
		if (options) {
			this.couponId = options.id;
			this.getCouponDetail()
		}
		
	},
	created() {
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url  : path,
				query: parmas
			});
		},
		formatTimestamp(timestamp) {
			const date    = new Date(timestamp);
			const year    = String(date.getFullYear());
			const month   = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且保证两位数
			const day     = String(date.getDate()).padStart(2, '0'); // 保证两位数
			const hours   = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		getCouponDetail(){
			this.$Api.merchant.couponEdit({id:this.couponId}).then(res => {
				let data = JSON.parse(JSON.stringify(res.data));
				this.courseDetail = data;
				this.courseDetail.begintime = this.formatTimestamp(res.data.begintime*1000)
				this.courseDetail.endtime = this.formatTimestamp(res.data.endtime*1000)
				this.courseDetail.use_begtime = this.formatTimestamp(res.data.use_begtime*1000)
				this.courseDetail.use_endtime = this.formatTimestamp(res.data.use_endtime*1000)
				console.log("===((courseDetail.received_num/courseDetail.give_num)*100).toString().toFixed(2)",
					((this.courseDetail.received_num/this.courseDetail.give_num)*100).toFixed(2))
			}).catch(err => {
				console.log(e)
			})
		},
		changeStatus(type) {
			this.couponStatus = type
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}

.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	
	.swipers {
		width: 100%;
	}
}

.nickname {
	font-size: 34rpx;
	font-weight: bold;
}

.content-box {
	.merchant-box {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #FFFFFF 100%);
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1), inset 0px 1px 0px 0px #FFFFFF;
		border-radius: 30rpx;
		min-height: 12vh;
		position: relative;
		overflow: hidden;
		
		.course-item {
			width: 100%;
			
			.merchant-logo {
				width: 140rpx;
				height: 200rpx;
				background: #fdf8f8;
				
				.coupon-top {
					font-weight: 400;
					font-size: 14px;
					color: #FF1E00;
					line-height: 21px;
					text-align: center;
					font-style: normal;
					padding: 10rpx 0;
					background: linear-gradient(90deg, #FFE2E2 0%, #FFF3F3 100%);
					border-radius: 14px 0px 0px 0px;
				}
				
				.coupon-money {
					font-weight: bold;
					font-size: 26px;
					color: #FF1E00;
					line-height: 39px;
					text-align: center;
					font-style: normal;
					margin-top: 12rpx;
					
					.coupon-unit {
						font-weight: bold;
						font-size: 16px;
						color: #FF1E00;
						line-height: 24px;
						text-align: center;
						font-style: normal;
					}
				}
				
				.coupon-rule {
					margin-top: 12rpx;
					font-weight: 400;
					font-size: 14px;
					color: #FF1E00;
					line-height: 21px;
					text-align: center;
					font-style: normal;
				}
			}
			
			.merchant-icon {
				width: 30rpx;
				height: 30rpx;
			}
			
			.course-item-text {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
			
			.course-item-number {
				font-weight: 400;
				font-size: 13px;
				color: #9A9A9A;
				line-height: 22px;
				text-align: left;
				font-style: normal;
			}
		}
		
	}
}

.coupon-content {
	background: #fff;
	width: 100%;
	padding: 0 30rpx;
	min-height: calc(100vh - 24vh);
	
	.coupon-instructions {
		padding: 30rpx 10rpx;
		
		.coupon-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 36px;
			text-align: left;
			font-style: normal;
		}
		
		.coupon-sub-title {
			font-weight: 400;
			font-size: 26rpx;
			color: #9A9A9A;
			line-height: 21px;
			
			.coupon-sub-num {
				font-weight: 400;
				color: #F96C2F;
				margin: 0 8rpx;
				font-size: 30rpx;
			}
		}
		
		.coupon-progress-content {
			
			width: 100%;
			
			.coupon-progress {
				margin-top: 20rpx;
				position: relative;
				width: 100%;
				color: #999CA7;
				
				.coupon-progress-start {
					position: absolute;
					top: 0;
					left: 0;
				}
				
				.coupon-progress-running {
					position: absolute;
					top: 0;
					color: #F96C2F;
				}
				
				.coupon-progress-end {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
}
</style>
